<template>
    <div>
        <Home-Header ></Home-Header>
        <Home-Swiper :List="swiperList"></Home-Swiper>
        <Home-Icons :List="iconList"></Home-Icons>
        <Home-Recommend :List="itemList"></Home-Recommend>
        <Home-Weekend :List="weekendList"></Home-Weekend>
    </div>
</template>

<script>
import HomeHeader from './components/HomeHeader.vue'
import HomeSwiper from './components/HomeSwiper.vue'
import HomeIcons from './components/HomeIcons.vue'
import HomeRecommend from './components/HomeRecommend.vue'
import HomeWeekend from './components/HomeWeekend.vue'
import axios from 'axios'
import { mapState } from 'vuex'

export default {
        name: 'Home',
        components: {
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
        },
        data () {
            return {
                lastCity: '',
                swiperList: [],
                iconList: [],
                recommendList: [],
                itemList: [] ,
                weekendList: []
            }
        },
        computed: {
           ...mapState(['city'])
        },
        methods: {
            getHomeInfo () {
                axios.get('dist/mock/index.json?city='+ this.city).then(this.getHomeInfoSucc)
            },
            getHomeInfoSucc (res) {
                res = res.data;
                if(res.ret && res.data) {
                    const data =res.data
                    this.swiperList = data.swiperList
                    this.iconList = data.iconList
                    this.itemList = data.itemList
                    this.weekendList = data.weekendList

                }
            }

        },
        mounted () {
            this.city=this.lastCity
            this.getHomeInfo()
        },
        activated () {
            if(this.lastCity !== this.city){
                this.lastCity=this.city
                this.getHomeInfo()
            }
        }
    }
</script>

<style>

</style>